<template>
  <div class="static">
    <header>
      <div class="static-left">
        <!--        邮件自动化统计-->
        <ul>
          <li @click="toggle(true)" :class="state?'active':''"><i
            class="iconfont icon-youjianfasongrizhi"></i> 邮件
          </li>
          <li @click="toggle(false)" :class="!state?'active1':''"><i class="iconfont icon-kehu2"></i> 社交
          </li>
        </ul>
      </div>
      <a href="javascript:void(0)">
        <b class="search-roll">
          <input type="text" placeholder="输入模板名称查找" class="search" v-model="searchContent"
                 @keyup.enter="search">
          <i class="el-icon-search" @click="search"></i>
        </b>
        <el-button size="mini" type="primary" class="new-btn" @click="dialogVisible=true" style="margin-left: 15px">+新增营销规则
        </el-button>
      </a>
    </header>
    <div class="box">
      <!-- 待定-->
      <EmailComponent ref="emailComponent" v-if="state"></EmailComponent>
      <SocialComponent ref="socialComponent" v-else></SocialComponent>
    </div>

    <el-dialog :visible.sync="dialogVisible" width="550px"
               title="新建营销规则" center>
      <div class="new-content">
        <ul>
          <li @click="isFrag=1" :class="{active:isFrag==1}">邮件规则</li>
          <li @click="isFrag=2" :class="{active:isFrag==2}">社交规则</li>
        </ul>
      </div>
      <div slot="footer" class="dialog-footer" align="right">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="toNext">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import EmailComponent from "@/components/automation/marketStatic/EmailComponent";
    import SocialComponent from "@/components/automation/marketStatic/SocialComponent";
    import {mapState} from 'vuex'

    export default {
        name: "index",
        components: {EmailComponent, SocialComponent},
        data() {
            return {
                dialogVisible: false,
                state: true,
                searchContent: '',
                isFrag: 1
            }
        },
        computed: {
            ...mapState(['common'])
        },
        mounted() {
            this.state = this.common.socialFrag;
        },
        methods: {
            toggle(state) {
                this.state = state;
                this.searchContent = '';
                this.$store.commit('SET_SOCIALFRAG', state);
            },
            search() {
                if (this.state) {
                    this.$refs.emailComponent.search(this.searchContent);
                } else {
                    this.$refs.socialComponent.search(this.searchContent);
                }
            },
            toNext() {
                let path = this.isFrag == 1?'/automation/mailAutomation':'/automation/socialAutomation';
                this.$router.push(path)
                this.bus.$emit('listenAutoCheck',path)
            },
        }
    }
</script>

<style scoped lang="scss">
  .static {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    header {
      display: flex;
      justify-content: space-between;
      margin: 0 0 10px 0;
      .static-left {
        display: flex;
        width: 50%;

        ul {
          display: flex;
          align-items: center;
          width: 290px;
          height: 30px;
          border: 1px solid #2A97F9;
          border-radius: 10px;

          li {
            text-align: center;
            width: 150px;
            height: 100%;
            line-height: 28px;
            cursor: pointer;

            i {
              margin-right: 5px;
            }
          }

          .active {
            color: #fff;
            background-color: #2A97F9;
            border-bottom-left-radius: 6px;
            border-top-left-radius: 6px;
          }

          .active1 {
            color: #fff;
            background-color: #2A97F9;
            border-bottom-right-radius: 6px;
            border-top-right-radius: 6px;
          }
        }

        button.el-button.el-button--primary.el-button--small {
          margin-left: 20px;
        }
      }
      button.el-button.new-btn.el-button--primary.el-button--mini{
        background-color: #2A97F9;
        color: #fff;
        border-radius: 10px;
        border: 0;
        padding: 0 20px;
        height: 30px;
        line-height: 30px;
      }
    }

    .new-content {
      padding: 30px 0;

      ul {
        display: flex;
        justify-content: space-around;

        li {
          width: 150px;
          line-height: 70px;
          text-align: center;
          background-color: #F5F5F5;
          color: #000;
          border-radius: 5px;
          cursor: pointer;
        }

        li.active {
          background-color: #CCE1F4;
        }
      }
    }
  }
</style>
